<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户信息 - 新闻管理系统</title>
    <!-- 引入Vue和Axios -->
    <script src="js/vue.js"></script>
    <script src="js/axios-0.18.0.js"></script>
    <!-- 引入Element UI 样式和组件 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 20px;
            background-color: #f5f5f5;
        }
        .container {
            max-width: 800px;
            margin: 0 auto;
            background: white;
            padding: 20px;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
        }
        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            border-bottom: 1px solid #eee;
            padding-bottom: 15px;
        }
        .user-info {
            margin-top: 20px;
        }
        .info-item {
            margin-bottom: 15px;
            display: flex;
            align-items: center;
        }
        .info-label {
            width: 100px;
            font-weight: bold;
            color: #666;
        }
        .info-value {
            flex: 1;
        }
        .el-input, .el-select {
            width: 100%;
        }
        .el-textarea {
            width: 100%;
        }
        .action-buttons {
            margin-top: 30px;
            text-align: center;
        }
        .avatar-container {
            text-align: center;
            margin-bottom: 20px;
        }
        .avatar {
            width: 120px;
            height: 120px;
            border-radius: 50%;
            object-fit: cover;
            border: 2px solid #eee;
        }
        .edit-icon {
            margin-left: 10px;
            cursor: pointer;
            color: #409EFF;
        }
    </style>
</head>
<body>
<div id="app">
    <div class="container">
        <div class="header">
            <h2>我的信息</h2>
            <el-button type="primary" @click="saveUserInfo">保存修改</el-button>
        </div>

        <div class="avatar-container">
            <img :src="user.avatar || 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'"
                 class="avatar"
                 @click="showAvatarDialog = true">
            <i class="el-icon-edit edit-icon" @click="showAvatarDialog = true"></i>
        </div>

        <div class="user-info">
            <div class="info-item">
                <div class="info-label">用户名:</div>
                <div class="info-value">
                    <el-input v-model="user.username" :disabled="!editing"></el-input>
                </div>
            </div>

            <div class="info-item">
                <div class="info-label">注册时间:</div>
                <div class="info-value">
                    {{ formatDate(user.registerTime) }}
                </div>
            </div>

            <div class="info-item">
                <div class="info-label">性别:</div>
                <div class="info-value">
                    <el-select v-model="user.gender" :disabled="!editing">
                        <el-option label="男" value="male"></el-option>
                        <el-option label="女" value="female"></el-option>
                        <el-option label="保密" value="secret"></el-option>
                    </el-select>
                </div>
            </div>

            <div class="info-item">
                <div class="info-label">电子邮箱:</div>
                <div class="info-value">
                    <el-input v-model="user.email" :disabled="!editing"></el-input>
                </div>
            </div>

            <div class="info-item">
                <div class="info-label">个性签名:</div>
                <div class="info-value">
                    <el-input
                            type="textarea"
                            :rows="3"
                            v-model="user.bio"
                            :disabled="!editing"
                            placeholder="介绍一下你自己..."></el-input>
                </div>
            </div>

            <div class="action-buttons">
                <el-button
                        type="primary"
                        @click="editing = !editing"
                        v-text="editing ? '取消编辑' : '编辑信息'"></el-button>
            </div>
        </div>
    </div>

    <!-- 修改头像对话框 -->
    <el-dialog title="修改头像" :visible.sync="showAvatarDialog" width="30%">
        <el-upload
                class="avatar-uploader"
                action="/api/upload/avatar"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload">
            <img v-if="avatarUrl" :src="avatarUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
        <span slot="footer" class="dialog-footer">
            <el-button @click="showAvatarDialog = false">取 消</el-button>
            <el-button type="primary" @click="updateAvatar">确 定</el-button>
        </span>
    </el-dialog>
</div>

<script>
    new Vue({
        el: '#app',
        data() {
            return {
                user: {
                    userId: '',
                    username: '',
                    registerTime: '',
                    gender: 'secret',
                    email: '',
                    bio: '',
                    avatar: ''
                },
                editing: false,
                showAvatarDialog: false,
                avatarUrl: ''
            }
        },
        created() {
            // 获取当前用户信息
            this.fetchUserInfo();
        },
        methods: {
            // 获取用户信息
            fetchUserInfo() {
                // 这里假设从后端获取当前登录用户信息
                // 实际应用中应该从会话或token中获取用户ID
                const userId = 1; // 示例用户ID
                axios.get(`http://localhost:8080/users/findById/${uid}`)
                    .then(response => {
                        if (response.data.code === 200) {
                            this.user = response.data.data;
                            // 设置默认头像URL
                            if (!this.user.avatar) {
                                this.user.avatar = 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png';
                            }
                        } else {
                            this.$message.error(response.data.message || '获取用户信息失败');
                        }
                    })
                    .catch(error => {
                        this.$message.error('请求出错: ' + error.message);
                    });
            },

            // 格式化日期
            formatDate(dateStr) {
                if (!dateStr) return '';
                try {
                    const date = new Date(dateStr);
                    const year = date.getFullYear();
                    const month = String(date.getMonth() + 1).padStart(2, '0');
                    const day = String(date.getDate()).padStart(2, '0');
                    return `${year}-${month}-${day}`;
                } catch (error) {
                    console.error('日期格式化错误:', error);
                    return dateStr;
                }
            },

            // 保存用户信息
            saveUserInfo() {
                axios.post('http://localhost:8080/users/updateById', this.user)
                    .then(response => {
                        if (response.data.code === 200) {
                            this.$message.success('信息更新成功');
                            this.editing = false;
                            this.fetchUserInfo(); // 刷新用户信息
                        }
                    })

            },
        }, created() { // 创建的时候就去调用获取用户信息
            this.user = JSON.parse(sessionStorage.getItem("user"));
            console.log("用户信息: " + this.user.userId)
        },
    })
</script>
</body>
</html>
